<template>
	<view class="quan">
		<!-- 头部栏 -->
		<image src="/static/headerBg.png" class="imimg">
		<view class="top">
			<!-- <image :src="wz+banner[sum]" class="top_bj_img" /> -->
			<!-- 头部标题 -->
			<view class="top_nav">
				<!-- 搜索框输入 -->
				<view class="input_box">
					<image class="search_img" src='/static/sousuo.png' @click="select_btn" />
					<input type="text" class="text" @input="select" placeholder="搜索关键词" @confirm="select_btn" placeholder-style="color:#FFFFFF" />
				</view>
			 <!-- 消息 -->
				<view class="new" @tap="tiao">
					<image class="new_img" src='/static/new.png' />
					<view class="new_text">消息</view>
				</view>
			<!-- 账单 -->
					<view class="bill" @tap="my">
						<image class="bill_img" src='/static/qiehuan.png' />
						<view class="bill_text">切换</view>
					</view>
			</view>
			
				<!-- 中部广告 -->
				<view class="ad">
					<swiper class="ad_img"  :autoplay="true" :interval="5000" :duration="300" @change="sums">
								<swiper-item v-for="(item,index) in banner"  :key="index" >
										 <image  class="ad_img" :src="wz+item" ></image>
									  </swiper-item>					
										</swiper>
				</view> 
				<!-- 轮播指示点样式修改 -->
				      <view class="dots">
				          <block v-for="(item,index) in banner" :key="item">
				              <view class="dot" :class="index==sum ? ' active' : ''"></view>
				          </block>
				      </view>
				<!-- 扫一扫，付款，收钱码，卡包 -->
				<view class="lei" v-for="(item,index) in fenlei" :key="index" @click="classify(item)">
									<image class="c_img1" :src="item.icon"></image>
									<view class="c_name" >{{item.name}}</view>
					</view>
					<!-- 消息公告栏 -->
					<view class="zhong">
					<view class="hidde">
						<image src="/static/laba.png" class="hidde_left" />
						<swiper class="hidde_img"  :autoplay="true" :interval="5000" :duration="300">
									<swiper-item v-for="(item,index) in ad"  :key="index">
											 <view class="hidde_text">:{{item.title}}</view>
											 <view class="hidde_time">{{item.add_time.substring(item.add_time.length-8)}}</view>
										  </swiper-item>					
											</swiper>
					</view>
					</view>
		</view>
		<view class="xia">
	<image src="/static/hotSaleBg@1x.png" style="width: 100%; height: 100%; z-index: 1;">
		<view class="selected-list">
			<view class="uni-padding-wrap uni-common-mt">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view id="demo1" class="scroll-view-item_H" @tap="wwww" v-for="(item,index5) in hot[0].rushtobuy" :key="index5">
							<view class="music-tit" @tap="shoptop(item.id)">
								<image :src="wz+item.img" class="tit_img" />
								<view class="tit_tex">{{item.title}}</view>
								<view class="price">
									<span style="float: left; font-weight: bold;">特价</span>
									<span style="float: left;  color: #fb7923;">￥{{item.nowprice}}</span>
									<span style="float: right;">已卖{{item.salesnum}}</span>
								</view>
							</view>
							<view class="music-con">
								{{item.con}}
							</view>
						</view>
					</scroll-view>
			</view>
		</view>
	</image>
		</view>
		<!-- 购买方式分区 -->
		<view class="partition" v-for="(item,index) in partition" :key="index">
			<!-- 分区标题背景图 -->
			<view class="img"   @tap="more(item.id)">
			<image :src='wz+item.img' class="title_img" />
			</view>
			<!-- 区内商品展示 -->
			<view class="shop">
				<view class="shop_up" @tap="more(item.id)">
					<image class="haigou" src="/static/haigou.png"></image>
					<view class="begin_time">
						<view class="biaoyu">你要的我都有</view>
						<view class="time">{{item.desc}}</view>
					</view>
					<view class="shop_more"><image class="right_icon" src="/static/right.png"/></view>
				</view>
				<!-- 三窗分栏视图 -->
				<view class="center">
				<view v-for="(shop,index1) in item.rushtobuy" v-if="index1<3" :key="index1"  @tap="shoptop(shop.id)">
					<view class="shop_new">
						<image :src="wz+shop.img" class="show_img" />
						<view class="show_name">{{shop.title}}</view>
						<view class="shop_bottom">
							<view class="show_price">¥{{shop.price}}</view>
							<view class="show_xiaoliang">出售{{shop.salesnum}}</view>
						</view>
					</view>
				</view>
				</view>
				<!-- 分区底部两方块 -->   
				<view class="foot">
				<view v-for="(shopping,index2) in item.rushtobuy3" v-if="index2<2" :key="index2" @click="shopfoot(shopping.id)" class="footList">
					<view class="shopping_new">
						<image :src="wz+shopping.img" class="shopping_show_img" />
						<view class="shopping_show_name">{{shopping.title}}</view>
						<view class="shopping_show_price">热卖价<span style="color:red">{{shopping.price}}元</span></view>
					</view>
					</view>
					</view>
					<!-- 底部结束 -->
				
			</view>
			<!-- 商品展示结束 -->
	</view>
	<!-- 易货区 -->
	<image :src="wz+barter[0].img" class="barter_title_img" />
	<view class="barter_foot">
	<view v-for="(barter,index6) in barter[0].rushtobuy"  :key="index6" @click="shopfoot(barter.id)" class="barter_footList">
		<view class="barter_shopping_new">
			<image src="../../static/hot.png" class="barter_foot_hotimg" />
			<image :src="wz+barter.img" class="barter_shopping_show_img" />
			<view class="barter_shopping_show_name">{{barter.title}}</view>
			<view class="barter_shopping_show_price">热卖价<span style="color:red">{{barter.price}}元</span></view>
		</view>
		</view>
		</view>
	</view>
</template>

<script>
	import musicProgress from '@/components/auto-progress.vue'
	export default {
		data() {
			return {
				title: '',
				ad:[],
				desc:'',
				sum:'',
				hot:[],
				barter:[],
				fenlei:[{icon:'/static/saoyisao.png',name:'扫一扫',id:'../Richscan/Richscan',num:'1'},{icon:'/static/zhifu.png',name:'付款码',id:'../paymant_code/paymant_code'},{icon:'/static/erweima.png',name:'收钱码',id:'../gathering_code/gathering_code'},{icon:'/static/kabao.png',name:'卡包',id:'../list_bank/list_bank'}],
				
				partition:'',
				banner:[],
				wz:this.$host,
			}
			},
			components:{
				musicProgress
			},
		onLoad(){
			uni.showLoading({
			    title: '拼命加载中'
			});
			console.log("实验一下",this.$host)
			// APP版本号
						uni.request({
								url: 'http://tuiguang.yiyunoto.com/api/login/version',
								method: 'POST',
								success: (res) => {
									console.log("APP版本号请求成功", res)
									console.log(this.$store.state.version)
									if (res.data.data.version == this.$store.state.version) {
										return;
									} else {
										uni.showModal({
											title: '提示',
											content: '该版本号已更新请前往更新！',
											success: (res2) => {
												console.log('success', res.data.data.version);
												if (res2.confirm) {
													console.log("你点击了确认")
													uni.redirectTo({
														url: '../download/download'
													})
												} else {
													uni.redirectTo({
														url: "../login/login?tyid=" + 1
													})
												}
			
											}
										});
			
									}
								},
								fail: (res) => {
									console.log("请求失败", res)
								},
							}),
							//APP版本号结束
			
				// 商品请求接口
				console.log("213",this.$store.state.token)
				uni.request({
					url:'http://tuiguang.yiyunoto.com/api/index/index',
					header:{authtoken:this.$store.state.token},
					method:'POST',
					success:(res)=>{
						this.banner=res.data.data.banner
						this.partition=res.data.data.result
						this.ad=res.data.data.articles
						this.hot=res.data.data.hot
						this.barter=res.data.data.barter
						uni.hideLoading()
					},
					fail:(res)=>{
						console.log("请求失败",res)
					}
				})
		},
		methods: {
			sums:function(e){
				 this.sum = e.detail.current;
			},
			// 下拉刷新监听事件及刷新成功后事件
			onPullDownRefresh: function() {
				uni.request({
					url:'http://tuiguang.yiyunoto.com/api/index/index',
					header:{authtoken:this.$store.state.token},
					method:'POST',
					success:(res)=>{
						this.banner=res.data.data.banner
						this.partition=res.data.data.result
						// 刷新成功后停止按钮
						 uni.stopPullDownRefresh();
					},
					fail:(res)=>{
						console.log("请求失败",res)
					}
				})
			},
			
			// 搜索栏
			select:function(e){
				console.log(e.detail.value)
				this.title=e.detail.value
			},
			select_btn:function(){
				console.log(this.title);
					var b=this.title.indexOf("【")+1;
					var a=this.title.indexOf("！")+1;
					var desc = this.title.substring(a);
					var desc2 = this.title.substr(b,2);
					if(desc2 == "复制"){
				if(desc == !isNaN){
					return
				}else{
					uni.showModal({
					    title: '提示',
					    content: '检测到商品分享链接，是否前往？',
					    success:(res2)=>{
							if (res2.confirm) {
								uni.navigateTo({
									url:"../product/product?id="+desc
								})
							}
					    }
					});
					
				}
				}else{
					uni.request({
							url:'http://tuiguang.yiyunoto.com/api/index/search',
							header:{authtoken:this.$store.state.token},
							method:'POST',
							data:{title:this.title},
							success:(res)=>{
								console.log("请求成功",res)
								uni.showToast({
									title:res.data.msg,
								})
								if(res.data.msg=="搜索成功"){
									uni.navigateTo({
										url:"../select/select?data="+this.title
									})
								}
							},
							fail:(res)=>{
								console.log("请求失败",res)
							}
						})
				}
				
			},  
			classify:function(e){
				console.log("扫码",e)
				if(e.num==1){
					uni.scanCode({
						success:(res)=> {
							console.log("扫码成功",res)
							let type =  res.result.substring(11)
							console.log("扫码成功2",type)
							uni.navigateTo({
								url:'../Richscan/Richscan?id='+res.result
							})
						}
					})
				}else{
					uni.navigateTo({
						url:e.id
					})
				}
			},
			shoptop:function(e){
				uni.navigateTo({
					url:"../product/product?id="+e
				})
			},
			shopfoot:function(e){
				uni.navigateTo({
					url:"../product/product?id="+e
				})
			},
			more:function(e){
				uni.navigateTo({
					url:'../Buy_hurry/index?id='+e
				})
			},
			my:function(){
				uni.navigateTo({
					url:"../login/login?tyid="+1   
				})
			},
		}
	}
</script>

<style lang="less">
	.selected-list {
		width: 94%;
		height:500upx;
		overflow: hidden;
		box-sizing: border-box;
		position: absolute;
		top:980upx ;
		z-index: 5;
		.scroll-view-item_H {
			display: inline-block;
			width: 60%;
			height:450upx;
			font-size: 36upx;
			padding: 20upx;
			margin:0upx 2%;
			overflow: hidden;
			box-sizing: border-box;
			border-radius: 20upx;
			box-shadow: 1upx 1upx 2upx 1upx rgba(170, 170, 170, 1);
			background-color: #FFFFFF;
		}
		.uni-common-mt {
			margin-top: 0upx;
		}
		.uni-padding-wrap {
			width: 100%;
			padding: 0upx;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 450upx;
			box-sizing: border-box;
		}
		.music-con,
		.music-step {
			width: 100%;
			color: #fff;
			overflow: hidden;
			box-sizing: border-box;
			line-height: 60upx;
		}
		.music-tit {
			width: 100%;
			height:450upx ;
			font-size: 26upx;
			.tit_img{
				width:100% ;
				height: 330upx;
			}
			.tit_tex{
				width:100%;
				height: 45upx;
			}
		}
		.music-con {
			font-size: 30upx;
			text-align: left;
		}
		.music-step {
			.icon {
				float: left;
				font-size: 60upx;
				line-height: 70upx;
				margin-right: 20upx;
			}
			.line {
				margin-top: 31upx;
				._progress {
					width: 80%
				}
			}
		}
		.price{
			width: 100%;
			line-height: 50upx;
		}
	}
	.quan{
		width:100%;
		padding-bottom:20upx;
		background: #efeded;
	}
	
	.shop_car{
		width:100upx;
		height: 100upx;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.shop_car_img{
		width:100upx;
		height:100upx;
		border-radius: 50upx;
			}
			.imimg{
			width:100% ;	
			height:850upx;
			z-index:1;
			}
	/* 头部 */
	.top{
		width:100%;
		height:500upx ;
		border-radius:0upx 0upx 25% 25%;
		padding-top: 50upx;
		position:absolute;
		top:0upx;
		left:0upx;
		z-index: 2;
	}
	.top_bj_img {
			width: 100%;
			height: 500upx;
			filter: opacity(20%);
			position:absolute;
			top: 0upx;
			z-index:1;
			border-radius: 0px 0upx 50upx 50upx;
		}
	/* 输入框 */
	.top_nav{
		width: 100%;
		height: var(--status-bar-height);
	}
	.input_box{
		width:70%;
		height: 70upx;
		background:#ffbe68 ;
		border-radius:40upx;
		box-sizing: border-box;
		padding-top: 15upx;
		margin-left:40upx;
		margin-top:20upx;
		float: left;
	}
	.search_img{
		width:40upx;
		height: 40upx;
		margin: 3upx 20upx ;
		float: left;
	}
	.text{
		float: left;
		width:60%;
		line-height: 80upx;
		color:#656565;
	}
	
	/* 消息 */
	.new{
		width:10%;
		height: 80upx;
		padding-top: 20upx;
		box-sizing: border-box;
		float: left;
	}
	.new_img{
		width: 40upx;
		height: 40upx;
		margin: 0upx 15upx;
		box-sizing: border-box;
	}
	.new_text{
		color:#FFFFFF;
		font-size: 20upx;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	/* 账单 */
	.bill{
		width:10%;
		height: 80upx;
		padding-top: 20upx;
		margin-left: 10upx;
		float: left;
	}
	.bill_img{
		width: 40upx;
		height: 40upx;
		margin: 0upx 15upx;
		box-sizing: border-box;
	}
	.bill_text{
		color:#FFFFFF;
		font-size: 20upx;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	
	/* 分类小框 */
	.lei{
		margin-top:70upx ;
		width: 25%;
		float: left;
		box-sizing: border-box;
	}
	.c_img1{
		width:60upx ;
		height:60upx;
		margin:0upx 64upx;
	}
	.c_name{
		font-size:26upx ;
		color:#FFFFFF;
		text-align: center;
	}
	/* 中部广告 */
	.ad{
		width: 92%;
		height: 350upx;
		margin-left: 4%;
        margin-top: 90upx;
		box-sizing: border-box;
		border-radius:20upx;
		
	}
	.ad_img{
		width: 100%;
		height: 100%;
		border-radius:20upx;
		
	}
	//指示点
	.dots {
	          position: absolute;
	          bottom: -25rpx;
	          left: 50%;
	          // 这里一定要注意兼容不然很可能踩坑          
	          transform: translate(-50%, 0);
	          -webkit-transform: translate(-50%, 0);        
	          z-index: 99;
	          display: flex;
	          flex-direction: row;
	          justify-content: center;
	
	          .dot {
	              width: 20upx;
	              height: 20upx;
	              transition: all .6s;
	               background: rgba(255, 255, 255, .8);
	              margin-right: 10rpx;
				   border-radius: 50%;
	          }
	
	          .active {
	              width: 20upx;
	              height: 20upx;
				  border-radius: 50%;
				  background: rgba(125,255, 27, .3);
	             
	          }
	      }
	/* 提示框 */
	.zhong{
		position: absolute;
		top:750upx;
		left:20upx;
		width: 92%;   
	}
	.hidde{
		height: 85upx;
		background:#FFFFFF;
		box-sizing: border-box;
		border-radius:20upx;
	}
	.hidde_left{
		width: 40upx;
		height: 40upx;
		padding-top: 25upx;
		padding-left: 25upx;
		line-height: 85upx;
		float: left;
	}
	.hidde_img{
		width: 80%;
		height: 100%;
		border-radius:10upx;
		margin-left: 20upx;
		line-height: 85upx;
		float: left;
		color: #fc8638;
	}
	.hidde_text{
		width: 70%;
		line-height:65upx;
		float: left;
		color: #fc8638;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-top: 13upx;
	}
	.hidde_time{
		width: 30%;
		line-height:65upx;
		float: right;
		padding-top: 13upx;
		text-align: right;
		color: #fc8638;
	}
	.xia{
		width:710upx ;
		height: 592upx;
		padding-left: 20upx;
	}
	.one{
		display: inline-block; 
		width: 200px; 
		height: 200px; 
		background: green;
	}
	

	/* 抢购分区 */
	.partition{
		width:92%;
		margin: 0upx auto;
	}
	.img{
		width:100%;
		margin-top: 40upx;
		padding-bottom: 20upx;
		height:120upx;
	}
	.title_img{
		width:100%;
		height: 100%;
		
	}
	.shop{
		margin-top: 10upx;
		width:100%;
	}
	.right_icon{
		width:25upx;
		height: 35upx;
	}
	.shop_up{
		width:100%;
		height: 100upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0upx 0upx;
	}
	.haigou{
		width:20%;
		height: 80%;
		padding-top:20upx ;
		padding-left: 22upx;
		float: left;
		box-sizing: border-box;
	}
	.begin_time{
		width:60%;
		padding-left: 13upx;
		float:left;
	}
	.biaoyu{
			font-size: 26upx;
			color:#FF5E00;
			margin: 20upx 0upx 0upx 0upx;
	}
	.time{
		font-size: 26upx;
		color:#FF5E00;
	}
	.shop_more{
		width:60upx;
		height: 60upx;
		float: right;
		margin-right:20upx;
		padding-top: 20upx;
		box-sizing: border-box;
	}
	.center{
		width:100%;
		height:260upx;
		border-radius: 0upx 0upx 20upx 20upx;
		background: #FFFFFF;
		margin-bottom: 20upx;
		box-sizing: border-box;
		
	}
	.shop_new{
		width:30%;
		height:100%;
		margin: 10upx;
		padding:0upx 10upx;
		box-sizing: border-box;
		float: left;
	}
	.show_img{
		width:100%;
		height: 150upx;
		padding:0upx 10upx;
		border-radius: 20upx;
		box-sizing: border-box;
	}
	.show_name{
		padding:0upx 10upx;
		margin-left: 10upx;
		font-size:24upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
	}
	.shop_bottom{
		padding:0upx 10upx;
		padding-left: 20upx;
		width:100%;
		box-sizing: border-box;
		display: inline;
	}
	.show_xiaoliang{
		color:#cfcfcf;
		width:20%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-top: 10upx;
		padding-left: 5upx;
		font-size: 16upx;
		float: left;
	}
	.show_price{
		font-size:24upx;
		margin-left: 10upx;
		float: left;
		color:red;
	}
	/* 抢购分区底部 */
	.foot{
		width: 100%;
		height:330upx;
		display:flex;
		justify-content: space-between;
	}
	.shopping_new{
		margin-top: 20upx;
		width: 330upx;
		height: 325upx;
		/* margin:2%; */
		background: #FFFFFF;
		border-radius: 10upx;
		box-sizing: border-box;
		/* float: left; */
	}
	.shopping_show_img{
		width:100%;
		height: 230upx;
		box-sizing: border-box;
		border-radius: 20upx 20upx 0upx 0upx;
	}
	.shopping_show_name{
		font-size: 26upx;
		color:#262B3F;
		text-align: center;
		overflow: hidden;
		 text-overflow: ellipsis;
		 white-space: nowrap;
		/* margin-left: 10upx; */
	}
	.shopping_show_price{
		text-align: center;
		font-size:20upx;
		color: #cccdd0;
	}
	/* 易货分区 */
	.barter_title_img{
		width: 92%;
		height: 120upx;
		margin-left: 4%;
		margin-top:40upx;
	}
	.barter_foot{
		width: 92%;
		// height:330upx;
		margin-left: 4%;
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.barter_shopping_new{
		width: 330upx;
		height: 325upx;
		margin-top:20upx ;
		// margin:2%; 
		background: #FFFFFF;
		border-radius: 10upx;
		box-sizing: border-box;
		float: left; 
	}
	.barter_foot_hotimg{
		width:80upx;
		height: 80upx;
		position:absolute;
		z-index: 2;
		float:right;
		
	}
	.barter_shopping_show_img{
		width:100%;
		height: 230upx;
		box-sizing: border-box;
		border-radius: 20upx 20upx 0upx 0upx;
	}
	.barter_shopping_show_name{
		font-size: 26upx;
		color:#262B3F;
		text-align: center;
		overflow: hidden;
		 text-overflow: ellipsis;
		 white-space: nowrap;
		/* margin-left: 10upx; */
	}
	.barter_shopping_show_price{
		text-align: center;
		font-size:20upx;
		color: #cccdd0;
	}
</style>  
